<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input size="small" v-model.trim="form.type_no" placeholder="款号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.horse_embroidery_id" filterable remote placeholder="输入搜索的工序加工厂名称" size="small"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable>
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.supplier_id" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" placeholder="扣款状态" v-model="form.k_status" style="width: 120px" clearable>
                        <el-option :value=0 label="未抵扣"></el-option>
                        <el-option :value=2 label="已抵扣"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" placeholder="审核状态" v-model="form.status" style="width: 120px" clearable>
                        <el-option :value=0 label="未审核"></el-option>
                        <el-option :value=1 label="已通过"></el-option>
                        <el-option :value=2 label="未通过"></el-option>
                        <el-option :value=3 label="已作废"></el-option>
                        <el-option :value=4 label="已撤回"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column label="工序加工单" prop="working_number" width="140"></el-table-column>
                <el-table-column label="合同号" prop="factory_contract_no" width="170"></el-table-column>
                <el-table-column label="款号" prop="type_no" width="130"></el-table-column>
                <el-table-column label="工序加工厂" prop="horse_embroidery_factory_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="单价" prop="price" width="80"></el-table-column>
                <el-table-column label="数量" prop="num" width="80"></el-table-column>
                <el-table-column label="金额" prop="amount" width="80"></el-table-column>
                <el-table-column label="交期" prop="delivery_date" width="90"></el-table-column>
                <el-table-column label="创建人" prop="adduser" width="80"></el-table-column>
                <el-table-column label="创建时间" prop="createtime" width="135"></el-table-column>
                <el-table-column label="扣款状态" align="center" prop="k_status" width="90">
                    <template slot-scope="{ row }">
                        <el-tag size="mini" type="success" v-if="row.k_status==2">已抵扣</el-tag>
                        <el-tag size="mini" type="info" v-else>未抵扣</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="status" width="90">
                    <template slot-scope="{ row }">
                        <el-tag size="mini" v-if="row.status==0">待审核</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.status==1">已通过</el-tag>
                        <el-tag size="mini" type="danger" v-else-if="row.status==2">未通过</el-tag>
                        <el-tag size="mini" type="info" v-else-if="row.status==3">已作废</el-tag>
                        <el-tag size="mini" type="info" v-else-if="row.status==4">已撤回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核时间" prop="examinetime" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="{row}">
                        <el-button type="text" size="mini" @click="approvalProcessBtn(row.id, row.run_id)" :disabled="!row.run_id">审批进度</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--审核进度-->
        <el-drawer title="工序加工费审批" :visible.sync="approvalVisible" size="650px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <processWorking v-if="approvalVisible" :runId="runId" :id="workingId"></processWorking>
        </el-drawer>
    </section>
</template>

<script>

import {factoryList} from "@/api/produce/factory";
import {workingList} from "@/api/soa/working";
import processWorking from "@/view/components/flow/processWorking";

export default {
    name: "soa_working",
    components:{processWorking},
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {type_no: "", horse_embroidery_id: "", k_status: "", status: ""},
            searchLoading: false,
            factoryList: [],

            approvalVisible: false,
            runId: "",
            workingId: "",

        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 20, factory_name: name, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            workingList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //查看审核进度
        approvalProcessBtn(id, runId){
            this.runId = runId;
            this.workingId = id;
            this.approvalVisible = true;
        },
        closeBtn(){
            this.workingId = "";
            this.runId = "";
            this.approvalVisible = false;
        },
    },
    mounted() {
        this.getFactoryData("");
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
